<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:font-family="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>搜索结果</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/css/adminlte.min.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{plugins/fontawesome-free/css/all.min.css}">
    <link rel="stylesheet" th:href="@{/css/my.css}">
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed" style="opacity: 99%">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header  animated fadeInDown navbar navbar-expand navbar-white navbar-light ">
        <!-- Left navbar links -->
        <ul class="navbar-nav animated fadeIn">
            <li class="nav-item">
                <!-- PushMenu插件控制主侧栏的切换按钮。
                用法
                该插件可以作为jQuery插件或使用数据API激活。
                数据API
                添加data-widget="pushmenu"到按钮以激活插件。-->
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fa fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <h3 class="nav-link"
                    style="position: absolute; right: 10px; color: #1da7ee; font-family: 'STXingkai';">
                    怎么会 失去了 小时候的快乐 为什么</h3>
            </li>

        </ul>

        <!-- SEARCH FORM -->
        <form class="form-inline ml-3" th:action="@{/search}">
            <div class="input-group input-group-sm">
                <input  name="blogName" class="form-control form-control-navbar" type="search" placeholder="按博客名搜索..." aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-navbar" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </form>
        <h5 th:if="${error!=null}" style="color: red;font-family: 'STXingkai';" th:text="${error}"></h5>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container 左侧主容器 -->
    <aside class="main-sidebar sidebar-light-primary  elevation-4 animated fadeInLeft">
        <!-- 左侧容器头-->
        <h1>
            <a th:href="@{index}" class="brand-link">
                <img th:src="@{/upload/avatar.jpg}" class="brand-image img-circle elevation-3">
                <span class="brand-text font-weight-light"><h3 style="color: black">WhyBlog</h3></span>
            </a>
        </h1>
        <!-- Sidebar -->
        <!--     被选中的颜色-->
        <div class="sidebar ">
            <!-- Sidebar Menu -->
            <nav class="mt-4">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-header">刀斩肉身</li>
                    <li class="nav-item ">
                        <a th:href="@{/index}" class="nav-link active" >
                            <i class="fa fa-home nav-icon"></i>
                            <p>首页</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a th:href="@{/type}" class="nav-link">
                            <i class="fa fa-bookmark nav-icon"></i>
                            <p>分类</p>
                        </a>
                    </li>
<!--                    <li class="nav-item">-->
<!--                        <a href="https://leetcode-cn.com/u/why-21/" target="_blank" class="nav-link">-->
<!--                            <i class="fa fa-tags nav-icon"></i>-->
<!--                            <p>leetCode主页</p>-->
<!--                        </a>-->
<!--                    </li>-->
                    <li class="nav-item">
                        <a href="https://gitee.com/why741/" target="_blank" class="nav-link">
                            <i class="fa fa-tags nav-icon"></i>
                            <p>gitee</p>
                        </a>
                    </li>
                    <li class="nav-header">心斩灵魂</li>
                    <li class="nav-item">
                        <a th:href="@{/archive}" class="nav-link" >
                            <i class="fa fa-archive nav-icon"></i>
                            <p>归档</p>
                        </a>
                    </li>

                    <li class="nav-header">心斩灵魂</li>
                    <li class="nav-item">
                        <a class="nav-link" onclick="alert('页面开发中~')">
                            <i class="fa fa-archive nav-icon"></i>
                            <p>我的学习路线</p>
                        </a>
                    </li>


                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper mt-3 ">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 animated fadeIn">
                        <div class="card card-blue card-outline mb-5">
                            <div class="card-header">
                                <!--                博客数量-->
                                <h3 class="card-title float-right">
                                    当前共 <span th:if="${msg!=null}" class="text-blue text-xl" th:text="${msg.size}">1</span> 篇博客
                                </h3>
                            </div><!-- /.card-header -->
                            <!--              卡片体-->
                            <div th:if="${msg!=null}"> <div class="card-body bg-hover-gray"  th:each="blog:${msg.getList()}">
                                <div class="mb-1">
                                    <a th:href="'/detail/'+${blog.id}" th:text="${blog.name}" target="_blank"
                                       class="text-lg text-bold link-title"></a>
                                    <span class="badge badge-primary">原创</span>
                                </div>
                                <p th:text="${blog.description}">
                                    Lorem ipsum represents a long-held tradition for designers,
                                    typographers and the like. Some people hate it and argue for
                                    its demise, but others ignore the hate as they create awesome
                                    tools to help create filler text for everyone from bacon lovers
                                    to Charlie Sheen fans.
                                </p>
                                <p>
                                    <i class="far fa-calendar-alt mr-1"></i>
                                    <span th:text="${#dates.format(blog.create_time,'YYYY-MM-dd HH:mm:ss')}" class="text-sm mr-2">2019-01-01 10:08</span>
                                    <i class="far fa-eye mr-1"></i>
                                    <span th:text="${blog.views}" class="text-sm">10</span>
                                </p>
                                <p class="mb-0">

                                </p>
                                <hr class="m-3 bg-blue">
                            </div><!-- /.card-body --></div>



                            <div th:if="${msg!=null}" class="card-footer clearfix">
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item">
                         <span class="page-link" th:text="' 共'+${msg.navigatepageNums.length}+'页'"></span>
                                        </li>
                                        <li  th:if="${msg.hasPreviousPage}" class="page-item ">
                                            <a  class="page-link"  th:href="'/search?pageNum='+${msg.prePage}+'&blogName='+${blogName}"  tabindex="-1" aria-disabled="true">Previous</a>
                                        </li>
                                        <li th:each="num:${msg.navigatepageNums}" th:class="${msg.pageNum==num?'page-item active':''}" class="page-item">
                                            <a   class="page-link " th:href="'/search?pageNum='+${num}+'&blogName='+${blogName}" th:text="${num}"></a>
                                        </li>

                                        <li  class="page-item">
                                            <a th:if="${msg.hasNextPage}" class="page-link"  th:href="'/search?pageNum='+${msg.nextPage}+'&blogName='+${blogName}"  tabindex="-1" aria-disabled="true">Next</a>
                                        </li>
                                    </ul>
                                    <div ></div>
                                </nav>
                            </div><!-- /.card-footer -->
                        </div>
                        <!-- /.nav-tabs-custom -->
                    </div>
                    <!-- /.col -->

                </div>
                <!-- /.col -->
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <p class="text-center mb-1">
            Powered by AdminLTE
        </p>
        <p class="text-center">
            <a href="http://beian.miit.gov.cn" target="_blank">辽ICP备2020013405号</a>
        </p>
    </footer>
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/js/adminlte.min.js}"></script>
<script th:src="@{/js/tooltip.init.js}"></script>

</body>
</html>
